////
/// @group settings/typography
////

/// Root font size
///
/// This is used to calculate rem sizes for the typography, and should match the
/// _effective_ font-size of your root (or html) element.
///
/// Ideally you should not be setting the font-size on the html or root element
/// in order to allow it to scale with user-preference, in which case this
/// should be set to 16px.
///
/// @type Number
/// @access public

$govuk-root-font-size: 16px !default;

/// Responsive typography font map
///
/// This is used to generate responsive typography that adapts according to the
/// breakpoints.
///
/// Font size and font weight can be defined for each breakpoint. You can define
/// different behaviour on tablet and desktop. The 'null' breakpoint is for
/// mobile.
///
/// Line-heights will automatically be converted from pixel measurements into
/// relative values. For example, with a font-size of 16px and a line-height of
/// 24px, the line-height will be converted to 1.5 before output.
///
/// You can also specify a separate font size and line height for print media.
///
/// @type Map
///
/// @prop {Number} $point.$breakpoint.font-size - Font size for `$point` at `$breakpoint`
/// @prop {Number} $point.$breakpoint.line-height - Line height for `$point` at `$breakpoint`
/// @prop {Number} $point.print.font-size - Font size for `$point` when printing
/// @prop {Number} $point.print.line-height - Line height for `$point` when printing
///
/// @access public

$govuk-typography-scale: (
  80: (
    null: (
      font-size: 53px,
      line-height: 55px
    ),
    tablet: (
      font-size: 80px,
      line-height: 80px
    ),
    print: (
      font-size: 53pt,
      line-height: 1.1
    )
  ),
  48: (
    null: (
      font-size: 32px,
      line-height: 35px
    ),
    tablet: (
      font-size: 48px,
      line-height: 50px
    ),
    print: (
      font-size: 32pt,
      line-height: 1.15
    )
  ),
  36: (
    null: (
      font-size: 27px,
      line-height: 30px
    ),
    tablet: (
      font-size: 36px,
      line-height: 40px
    ),
    print: (
      font-size: 24pt,
      line-height: 1.05
    )
  ),
  27: (
    // Made same as 24 on mobile (consider deprecating this size)
    null: (
        font-size: 21px,
        line-height: 25px
      ),
    tablet: (
      font-size: 27px,
      line-height: 30px
    ),
    print: (
      font-size: 18pt,
      line-height: 1.15
    )
  ),
  24: (
    // Bump up mobile size from 18/20 to 21/25
    null: (
        font-size: 21px,
        line-height: 25px
      ),
    tablet: (
      font-size: 24px,
      line-height: 30px
    ),
    print: (
      font-size: 18pt,
      line-height: 1.15
    )
  ),
  19: (
    // Stay at 19/25 at all sizes
    null: (
        font-size: 19px,
        line-height: 25px
      ),
    print: (
      font-size: 14pt,
      line-height: 1.15
    )
  ),
  16: (
    // Stay at 16/20 at all sizes
    null: (
        font-size: 16px,
        line-height: 20px
      ),
    print: (
      font-size: 14pt,
      line-height: 1.2
    )
  )
) !default;
